<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../src/vue.js"></script>

		<style>
			body,
			ul,
			li,
			h2 {
				margin: 0;
				padding: 0;
			}
			
			li {
				list-style: none;
			}
			.list>div {
				margin-bottom: 10px;
			}
			.list .show {
				display: block;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="./css/qq.css" />
	</head>

	<body onselectstart="return false;">
		<div class="wrap" id="app">
			<div class="list">
				<div v-for="item,i in qq">
					<h2 @click="showHandle(i)"
						:class="{active:i===index}"
					><span></span>{{item.title}}</h2>
					<ul :class="{show:i===index}">
						<li v-for="option,j in item.list">{{option}}</li>
					</ul>

				</div>

			</div>
		</div>
		<script>

            let data = [
                {
                    title: '我的好友',
                    list: ["小佳Love", "从来就是这么正经", "leo是个胖子", "momo不是陌陌"]
                },
                {
                    title: '企业好友',
                    list: ["习近平", "普京", "奥巴马"]
                },
                {
                    title: '黑名单',
                    list: ["安倍", "杜特尔特"]
                }
            ];


            new Vue({
				el:'#app',
				data:{
					qq:data,
					index:-1
				},
				methods:{
                    showHandle(i){


                 this.index=this.index===i?'':i;



					}
				}
			})

		</script>
	</body>

</html>